<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-22 13:13:43
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-11-14 17:41:47
 * @FilePath: \app-formwork\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- <page-meta @click="closeView" :page-style="'overflow:' + (showhand ? 'hidden' : 'visible')"></page-meta> -->
  <!-- <page-meta :page-style="true ? 'overflow: hidden;' : 'overflow: auto;'"></page-meta> -->
  <!-- <u-overlay

    :show="overlay"
    :duration="400"
    :z-index="998"
    :opacity="0.1"
    @show="overlay = false"
  ></u-overlay> -->

  <view class="home">
    <!-- <page-meta :page-style="true ? 'overflow: hidden;' : 'overflow: auto;'"></page-meta> -->
    <!-- <view class="maskBg"></view> -->
    <!-- 头部 -->
    <view class="position">
      <view class="statusbar"></view>
      <view class="home_tittle flex column">
        <view class="search flex justify-between items">
          <view style="display: flex; width: 100%; align-items: center; position: relative">
            <up-input
              class="up_input"
              placeholder="根据标题或内容进行搜索"
              shape="circle"
              v-model="indexList.keywords"
              prefixIcon="search"
              prefixIconStyle="font-size: 50rpx;color: #FFF"
              @confirm="confirm"
              fontSize="24rpx"
              color="#fff"
              placeholderStyle="color: #FFF"
            ></up-input>
            <view
              @click="quxiao"
              v-if="serachClick"
              style="
                position: absolute;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.87);
                right: 24rpx;
              "
              >取消</view
            >
          </view>

          <view class="release flex" @click="goPublish">
            <view class="imglist" style="display: flex; align-items: center; justify-content: center">
              <image src="../../assets/images/release.png" alt="" />
            </view>
            <view class="publish">发布</view>
          </view>
        </view>
        <view class="classly flex justify-between items">
          <view class="tabs">
            <u-tabs
              class="u_tabs"
              :activeStyle="{
                color: '#ffffff',
                fontWeight: 'bold',
                transform: 'scale(1.02)'
              }"
              :inactiveStyle="{
                color: '#ffffff',
                transform: 'scale(1)'
              }"
              lineColor="#306EFF"
              :list="typeList"
              @click="tabsClick"
            ></u-tabs>
          </view>
          <view class="release flex column justify-center items" @click="openTypeList">
            <image style="height: 40rpx; width: 40rpx" src="../../assets/images/3more.png" alt="" />
          </view>
        </view>
      </view>
    </view>
    <!-- 中间内容 -->
    <view class="home_content">
      <!-- 占位盒子 -->
      <view style="height: 264rpx"></view>
      <!-- 轮播图 -->
      <view class="banner" v-if="isBanner">
        <u-swiper :list="list3" indicator indicatorMode="line" keyName="image" height="200" circular> </u-swiper>
      </view>

      <!-- <view v-if="list.length > 0">
        <view class="list flex column" v-for="(item, index) in list" :key="index">
          <view class="list_tittle flex">
            <view class="image">
              <image :src="item.titteimage" alt="" />
            </view>
            <view class="info flex column">
              <view class="info_tittle">
                <span>{{ item.tittle }}</span>
                <image :src="item.medal" alt="" />
              </view>

              <view class="info_text">
                <span>{{ item.nameBy }}</span>
                <span>{{ item.time }}</span>
              </view>
            </view>
            <view class="focus">
              <image :src="item.focus" alt="" />
            </view>
          </view>
          <view class="list_label">
            <u-tag
              class="u_tag"
              v-for="(gitem, gindex) in item.liet"
              :key="gindex"
              :text="gitem.name"
              plain
              shape="circle"
              icon="pushpin"
              size="mini"
              borderColor="#306EFF"
            ></u-tag>
          </view>
          <view class="list_text ellipsis-4">
            {{ item.text }}
          </view>
          <view class="list_photo">
            <image v-for="(titem, tindex) in item.photoBanner" :key="tindex" :src="titem.image" alt="" />
          </view>
          <view class="list_interactive flex items justify-between align-center">
            <view class="ax">
              <image src="../../assets/images/ax.png" alt="" />
              <span>{{ item.ax }}</span>
            </view>
            <view class="pl">
              <image src="../../assets/images/pl.png" alt="" />
              <span>{{ item.pl }}</span>
            </view>
            <view class="sc">
              <image src="../../assets/images/sc.png" alt="" />
              <span>{{ item.sc }}</span>
            </view>
          </view>
        </view>
      </view>
      <view v-else> 暂无相关内容</view> -->
      <view class="list_info" :class="tokenShow ? 'list_info' : 'nolist_info'">
        <commentList
          :dianzanType="dianzanType"
          :fellowshipLists="indexListData"
          :tittleShow="tittleShow"
          :moreList="moreList"
          :userinfo="userinfo"
          @dianzanEdit="myCancelgoods"
          @shoucangEdit="myShoucangEdit"
          @guanzhuEdit="myFocus"
        ></commentList>
      </view>

      <!-- 分割线 -->
      <!-- <u-viewider hairline="false" text="你已经达到我的底线了"></u-viewider> -->
    </view>
    <!-- 是否登录 -->
    <view class="SignUp" v-if="tokenShow">
      <view class="SignUp_top"> Get updates and stay tuned, please </view>
      <view class="SignUp_bottom">
        <view class="login_back" @click="goLogin()">SignUp/Login </view>
        <view class="later" @click="mylater()"> Maybe Later</view>
      </view>
    </view>
    <!-- 弹出框 -->
    <!-- <view>
      <u-popup :show="show" @close="close" mode="top" overlay="false" safeAreaInsetTop="true">
        <view>
          <text>人生若只如初见，何事秋风悲画扇</text>
        </view>
      </u-popup>
    </view> -->
    <view v-if="show" class="mask">
      <view class="msg">{{ state.show }}</view>
      <!-- 显示内容 -->
      <view class="showInfo">
        <view v-for="(item, index) in list1" :key="index">
          <view class="tabInfo" @click="onMoveCallback(item.id)" v-if="item.checked == 1">{{ item.name }}</view>
        </view>
      </view>
      <view class="line"></view>
      <view class="msg_cloose">{{ state.hiddle }}</view>
      <!-- 隐藏内容 -->
      <view class="clooseInfo">
        <view v-for="(item, index) in list1" :key="index">
          <view class="tabInfo" @click="onMoveCallback2(item.id)" v-if="item.checked == 0">{{ item.name }}</view>
        </view>
      </view>

      <!-- <view class="itxst">
        <view class="group line">
          <draggable
            :list="state.modules.arr1"
            style="width: 100%; min-height: 100rpx"
            ghost-class="ghost"
            handle=".move,.dd"
            filter=".forbid"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            @start="onStart"
            @end="onEnd"
            :group="state.groupA"
            :fallback-class="false"
            :fallback-on-body="false"
            :touch-start-threshold="50"
            :fallback-tolerance="50"
            :move="onMove"
            @change="onMoveCallback"
            :sort="true"
            class="Bzu flex flex-wrap hiddle"
          >
            <template #item="{ element }">
              <view class="itemmove items">
                <view class="move">{{ element.name }}</view>
              </view>
            </template>
          </draggable>
        </view>

        <view class="msg">{{ state.hiddle }}</view>
        <view class="group">
          <draggable
            class="Bzu flex flex-wrap hiddle"
            style="width: 100%; min-height: 100rpx"
            :list="state.modules.arr2"
            ghost-class="ghost"
            handle=".move,.dd"
            filter=".forbid"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            @start="onStart"
            @end="onEnd"
            :group="state.groupA"
            :fallback-class="false"
            :fallback-on-body="false"
            :touch-start-threshold="50"
            :fallback-tolerance="50"
            :move="onMove"
            @change="onMoveCallback2"
          >
            <template #item="{ element }">
              <view class="itemmove items">
                <view class="move">{{ element.name }}</view>
              </view>
            </template>
          </draggable>overlay
        </view>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import medal from "../../assets/images/medal.png";
import focus from "../../assets/images/focus.png";
import { homeApi } from "@/api/home";
import { userApi } from "../../api";
// 引入组件
import commentList from "../../components/comment-list/comment-list.vue";
//引入拖拽组件
import draggable from "vuedraggable";
const overlay = ref(false);
const title = ref("44433ssss");
//是否展示登录组件
const tokenShow = ref(true);
const token = ref("");

const onceShow=ref(1)
onLoad(() => {
  getTagList();
  if(onceShow.value==1){
    getTokenInfo();
  }
  
});
onShow(() => {
  indexList.value.page = 1
  getIndexList();
  getBanner();

  // uni.pageScrollTo({
  //   scrollTop: 1, //距离页面顶部的距离
  //   duration: 0 // 滚动动画时长
  // });


  //如果有token

  // getBanner();
  // getIndexList();
  // getTagList();
});
// const userinfo = ref('');
// const getUserInfo = () => {
//   userApi.userinfo().then((res) => {
//     userinfo.value = res.data.unid;
//     console.log("用户信息", res.data);
//   });
// };

const getTokenInfo=()=>{
  const token = uni.getStorageSync("token");
  console.log(' uni.getStorageSync("uuid");', uni.getStorageSync("uuid"));

    if (token != "") {
      console.log("1111",111)
      tokenShow.value = false;

  }
}
const goLogin = () => {
  uni.navigateTo({
    url: "/pages/login/index"
  });
};
const mylater=()=>{
  tokenShow.value=false
  onceShow.value=2

}
const tittleShow = ref(true);
const dianzanType = ref(false);
// 点赞/取消点赞
const myCancelgoods = (id) => {
  if (uni.getStorageSync("token") == "") {
    uni.navigateTo({
      url: "/pages/login/index"
    });
    return;
  }
  let cancelgoodsType = {
    type: 1, //1是论坛 2是评论
    id: id
  };
  userApi
    .cancelgoods(cancelgoodsType)
    .then((res) => {
      uni.showToast({ title: res.msg, icon: "none" });
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none" });
      } else {
        //红色心心
        indexListData.value.forEach((item) => {
          if (item.id == id) {
            item.is_goods = res.data.boolean ? 1 : 0;
            item.goods_num = res.data.num;
          }
        });
      }

      // getIndexList();
    })
    .catch((err) => {
      uni.showToast({ title: "请不要重复提交", icon: "none" });
    });
};

//收藏
const myShoucangEdit = (id) => {
  if (uni.getStorageSync("token") == "") {
    uni.navigateTo({
      url: "/pages/login/index"
    });
    return;
  }
  userApi
    .cancelcollect({ id: id })
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none" });
      } else {
        uni.showToast({ title: res.msg, icon: "none" });
        indexListData.value.forEach((item) => {
          if (item.id === id) {
            item.is_collect = res.data.boolean ? 1 : 0;
            item.collect_num = res.data.num;
          }
        });
      }

      // indexListData.value = [];
      // getIndexList();
    })
    .catch((err) => {
      uni.showToast({ title: err.msg, icon: "none" });
    });
};

//关注
const myFocus = (id) => {
  if (uni.getStorageSync("token") == "") {
    uni.navigateTo({
      url: "/pages/login/index"
    });
    return;
  }
  userApi
    .followFocus({ user_id: id })
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none" });
      } else {
        uni.showToast({ title: res.msg, icon: "none" });
        indexListData.value.forEach((item) => {
          if (item.user_id === id) {
            item.is_follow = res.data ? 1 : 0;
          }
        });
      }

      // indexListData.value = [];
      // getIndexList();
    })
    .catch((err) => {
      console.log("err", err);
      uni.showToast({ title: err.msg, icon: "none" });
    });
};

//切换登录注册下标显示
const isShow = ref(1);
const list1 = ref([]);

//点击切换tabs
const tabsClick = (item) => {
  console.log("item", item);
  indexList.value.tag = item.id;
  indexList.value.page = 1;
  indexListData.value = [];

  getIndexList();
};

//获取轮播图
const getBanner = () => {
  homeApi
    .homebanner({
      type: 1
    })
    .then((res) => {
      console.log("数据", res.data);
      list3.value = res.data;
    });
};
//轮播图
const list3 = ref([]);
const total = ref(0);
const indexListData = ref([]);
//获取首页论团数据
const indexList = ref({
  keywords: "",
  tag: "0",
  num: 10,
  page: 1
});
const getIndexList = () => {
  homeApi
    .forumlist(indexList.value)
    .then((res) => {
      if (res.code == 1) {
        total.value = res.data.total;
        indexListData.value = indexList.value.page === 1 ? res.data.data : indexListData.value.concat(res.data.data);
        console.log("最新数据", indexListData.value);
        // if (indexListData.value.length > 0) {
        //   isBanner.value = false;
        //   serachClick.value = true;
        // } else {
        //   isBanner.value = true;
        // }
        uni.hideLoading();
      }
    })
    .catch((err) => {
      uni.hideLoading();
    });
};
// 触底触发
const moreList = ref(0);
onReachBottom(() => {
  if (total.value > indexList.value.num * indexList.value.page) {
    indexList.value.page++;
    getIndexList();
    uni.showToast({
      title: "加载中……",
      icon: "none",
      duration: 1000
    });
    // moreList.value = 0;
  } else {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
      duration: 1000
    });
    return;
  }
});
const search = () => {
  indexListData.value = [];
  getIndexList();
};

//标签列表
const typeList = ref([]);
const getTagList = () => {
  homeApi.tagList().then((res) => {
    list1.value = res.data;
    console.log("数据显示", list1.value);
    //将checked==1的放到导航栏里面
    list1.value.forEach((item) => {
      if (item.checked == 1) {
        typeList.value.push(item); //列表标签 为1的标签列表
        // let newList = [];
        // newList = Array.from(new Set(typeList));
        // console.log("newList",  Array.from(new Set(typeList)));
      }
    });

    let openShow = [];
    let hiddenShow = [];
    list1.value.forEach((item) => {
      if (item.checked == 0) {
        //隐藏
        hiddenShow.push(item);
        state.value.modules.arr2 = hiddenShow;
        // list1.value=hiddenShow
        console.log("隐藏数据", hiddenShow);
      } else {
        //显示
        openShow.push(item);
        state.value.modules.arr1 = openShow;
        // list1.value=hiddenShow
      }
    });
  });
};

//搜索
const textSearch = ref("");
const isBanner = ref(true);
const serachClick = ref(false);
//取消
const quxiao = () => {
  (indexList.value.keywords = ""), (indexList.value.page = 1);
  isBanner.value = true;
  serachClick.value = false;
  getIndexList();
};
const confirm = () => {
  indexListData.value = [];
  total.value = [];
  indexList.value.page = 1;
  getIndexList();
  // homeApi
  //   .forumlist(indexList.value)
  //   .then((res) => {
  //     console.log("res", res);
  //     if (res.code == 1) {
  //       total.value = res.data.total;
  //       indexListData.value = [...indexListData.value, ...res.data.data];
  //       if (indexListData.value.length > 0) {
  //         isBanner.value = false;
  //         serachClick.value = true;
  //       } else {
  //         isBanner.value = true;
  //       }
  //       uni.hideLoading();
  //     }
  //   })
  //   .catch((err) => {
  //     uni.hideLoading();
  //   });
  console.log("1", 11111);
};
//list列表
const showhand = ref(false);

//拖拽
const state = ref({
  show: "显示",
  hiddle: "隐藏",

  modules: {
    arr1: [],
    arr2: []
  }
});
//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = (e) => {
  console.log("结束拖拽", e);
};
const statusOne = ref(true);
const onMoveCallback = (e) => {
  console.log("token");
  if (uni.getStorageSync("token") == "") {
    uni.navigateTo({ url: "/pages/login/index" });
    return false;
  }
  if (e == 0) {
    uni.showToast({ title: "此标签为默认全部标签,不可隐藏", icon: "none" });
    return false;
  }
  if (!statusOne.value) return;
  statusOne.value = false;
  homeApi.saveTag({ tag: e, type: 2 }).then((res) => {
    statusOne.value = true;
    if (res.code == 1) {
      uni.showToast({ title: res.msg, icon: "none" });
      show.value = false;
      overlay.value = !overlay.value;
      showhand.value = !showhand.value;
      // list1.value = [];
      typeList.value = [];
      getTagList();
    }
    if (res.code == 0) {
      uni.showToast({ title: res.msg, icon: "none" });
    }
  });
};

const statusTwo = ref(true);
const onMoveCallback2 = (e) => {
  if (uni.getStorageSync("token") == "") {
    uni.navigateTo({ url: "/pages/login/index" });
    return false;
  }
  if (!statusTwo.value) return;
  statusTwo.value = false;
  homeApi.saveTag({ tag: e, type: 1 }).then((res) => {
    statusTwo.value = true;
    if (res.code == 1) {
      uni.showToast({ title: res.msg, icon: "none" });
      show.value = false;
      overlay.value = !overlay.value;
      showhand.value = !showhand.value;
      // list1.value = [];
      typeList.value = [];
      // indexList.value.page = 1;
      getTagList();
      // getIndexList();
    }
    if (res.code == 0) {
      uni.showToast({ title: res.msg, icon: "none" });
    }
  });
};
// const onMove = (e) => {
//   //不允许停靠
//   if (e.relatedContext.element.disabledPark == true) return false;
//   return true;
// };

//打开类型
const show = ref(false);
//显示隐藏标签

const openTypeList = () => {
  // overlay.value = !overlay.value;
  // showhand.value = !showhand.value;
  show.value = !show.value;
};
const close = () => {
  show.value = false;
};
// const closeView = () => {
//   show.value = !show.value;
// overlay.value = !overlay.value;
// showhand.value = !showhand.value;
// };
// onPageScroll((e) => {
//   console.log("e", e);
//   show.value = false;
// });
// 发布论坛
const goPublish = () => {
  uni.navigateTo({ url: "/pagesA/home/publish-article" });
};
</script>

<style lang="scss" scoped>
page {
  background: #f5f5f5;
}
.showInfo {
  display: flex;
  flex-wrap: wrap;

  .tabInfo {
    margin: 14rpx 28rpx 14rpx 0;
    text-align: center;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    opacity: 1;
    padding: 16rpx 26rpx;
    border: 2rpx solid #306eff;
    font-size: 24rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #306eff;
  }
}
.line {
  border-bottom: 2rpx solid #86b8ff;
  margin-bottom: 28rpx;
  margin-top: 14rpx;
}
.clooseInfo {
  display: flex;
  flex-wrap: wrap;
  .tabInfo {
    margin: 14rpx 28rpx 14rpx 0;
    text-align: center;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    opacity: 1;
    border: 2rpx solid #9e9e9e;
    padding: 16rpx 26rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.38);
  }
}
//   穿透
// :deep(.u-tabs__wrapper__nav__item__text) {
//   color: #fff;
// }

.home {
  //   background: linear-gradient(135deg, #306eff 0%, #5ca7ff 100%);
  border-radius: 0px 0px 0px 0px;
  height: 100%;
  background: #f5f5f5;
  width: 100%;
  box-sizing: border-box;
  .maskBg {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
  }
}
.position {
  position: fixed;
  width: 100%;
  z-index: 9999;
  .statusbar {
    height: 88rpx;
    background-color: #306eff;
  }
}
.home_tittle {
  height: 176rpx;
  width: 100%;
  background-color: #306eff;
  padding: 0 32rpx;
  box-sizing: border-box;
  .search {
    height: 92rpx;
    background: #306eff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    .up_input {
      // height: 76rpx;
      background: #54a6fe;
      border: none;
      padding: 8px 9px;
    }
    .release {
      margin-left: 14rpx;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 56rpx;
      .imglist {
        height: 40rpx;
        width: 40rpx;
        margin-bottom: 8rpx;
        image {
          height: 100%;
          height: 40rpx;
          width: 40rpx;
        }
      }
      .publish {
        height: 24rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 24rpx;
      }
    }
  }
  .classly {
    height: 84rpx;
    background: #306eff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;

    .release {
      // margin-left: 16rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin-top: -6rpx;
      image {
        height: 48rpx;
        width: 48rpx;
      }
      // height: 24rpx;
    }
    .tabs {
      width: 626rpx;
      // border: 1px solid red;
      .u_tabs {
        color: red;
      }
    }
  }
}
.home_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //   padding: 0 32rpx;
  background: #f5f5f5;

  .banner {
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    width: 100%;
    padding: 20rpx 32rpx;
    height: 440rpx;
    box-sizing: border-box;
    .swiper {
      height: 400rpx;
      padding: 24rpx;
    }
  }
  // .list {
  //   // height: 584rpx;
  //   background: #ffffff;
  //   border-radius: 0rpx 0rpx 0rpx 0rpx;
  //   // border: 1px solid red;
  //   width: 100%;
  //   margin-top: 12rpx;
  //   padding: 24rpx 32rpx;
  //   box-sizing: border-box;
  //   .list_tittle {
  //     height: 94rpx;
  //     border-radius: 0rpx 0rpx 0rpx 0rpx;
  //     // border: 1rpx solid green;
  //     .image {
  //       width: 92rpx;
  //       height: 92rpx;
  //       image {
  //         height: 100%;
  //         width: 100%;
  //         border-radius: 50%;
  //       }
  //     }
  //     .info {
  //       flex: 1;
  //       // border: 1rpx solid yellow;
  //       margin-left: 16rpx;
  //       .info_tittle {
  //         display: flex;
  //         align-items: center;
  //         span {
  //           font-size: 32rpx;
  //           font-family: PingFang SC-Bold, PingFang SC;
  //           font-weight: bold;
  //           color: rgba(0, 0, 0, 0.87);
  //           line-height: 38rpx;
  //           margin-right: 8rpx;
  //         }
  //         image {
  //           height: 42rpx;
  //           width: 42rpx;
  //         }
  //       }
  //       .info_text {
  //         font-size: 24rpx;
  //         font-family: PingFang SC-Medium, PingFang SC;
  //         font-weight: 500;
  //         color: rgba(0, 0, 0, 0.38);
  //         line-height: 28rpx;
  //         margin-top: 16rpx;
  //       }
  //     }
  //     .focus {
  //       width: 36rpx;
  //       height: 36rpx;
  //       margin-top: 29rpx;
  //       image {
  //         height: 100%;
  //         width: 100%;
  //       }
  //     }
  //   }
  //   .list_label {
  //     height: 42rpx;
  //     border-radius: 0rpx 0rpx 0rpx 0rpx;
  //     opacity: 1;
  //     margin-top: 14rpx;
  //     .u_tag {
  //       margin-right: 12rpx;
  //     }
  //   }
  //   .list_text {
  //     font-size: 24rpx;
  //     font-family: PingFang SC-Medium, PingFang SC;
  //     font-weight: 500;
  //     color: rgba(0, 0, 0, 0.6);
  //     line-height: 36rpx;
  //     margin-top: 16rpx;
  //     margin-bottom: 12rpx;
  //   }
  //   .list_photo {
  //     height: 218rpx;
  //     width: 100%;
  //     display: flex;
  //     justify-content: space-between;
  //     image {
  //       width: 218rpx;
  //       height: 218rpx;
  //       background: #d9d9d9;
  //       border-radius: 12rpx 12rpx 12rpx 12rpx;
  //     }
  //   }
  //   .list_interactive {
  //     margin-top: 12rpx;
  //     height: 88rpx;
  //     border-radius: 0rpx 0rpx 0rpx 0rpx;
  //     opacity: 1;
  //     border-top: 1rpx solid rgba(0, 0, 0, 0.06);
  //     .ax {
  //       display: flex;
  //       align-items: center;
  //       image {
  //         height: 40rpx;
  //         width: 40rpx;
  //       }
  //       span {
  //         margin-left: 8rpx;
  //         font-size: 24rpx;
  //         font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
  //         font-weight: 400;
  //         color: rgba(0, 0, 0, 0.87);
  //       }
  //     }
  //     .pl {
  //       display: flex;
  //       align-items: center;
  //       image {
  //         height: 40rpx;
  //         width: 40rpx;
  //       }
  //       span {
  //         margin-left: 8rpx;
  //         font-size: 24rpx;
  //         font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
  //         font-weight: 400;
  //         color: rgba(0, 0, 0, 0.87);
  //       }
  //     }
  //     .sc {
  //       display: flex;
  //       align-items: center;
  //       image {
  //         height: 40rpx;
  //         width: 40rpx;
  //       }
  //       span {
  //         margin-left: 8rpx;
  //         font-size: 24rpx;
  //         font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
  //         font-weight: 400;
  //         color: rgba(0, 0, 0, 0.87);
  //       }
  //     }
  //   }
  // }
}
.list_info {
  margin-bottom: 136rpx;
  width: 100%;
}
.nolist_info {
  margin-bottom: 0rpx;
  width: 100%;
}
.SignUp {
  height: 136rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 32rpx;
  background: #306eff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  width: 100%;
  position: fixed;
  bottom: 60rpx;
  left: 0rpx;
  .SignUp_top {
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 33rpx;
  }

  .SignUp_bottom {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .login_back {
      width: 158rpx;
      height: 36rpx;
      font-size: 24rpx;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      color: #ffffff;
      line-height: 36rpx;
      border-bottom: 4rpx solid #fff;
    }
    .later {
      width: 158rpx;
      height: 36rpx;
      font-size: 24rpx;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      color: #c7e7ff;
      line-height: 36rpx;
    }
  }
}
.hiddle {
  min-height: 100rpx;
  width: 100%;
}

.mask {
  // height: 500rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 24rpx 32rpx;
  position: fixed;
  left: 0;
  top: 264rpx;
  background: rgba(255, 255, 255, 0.95);
  z-index: 999;
  .msg {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #306eff;
    line-height: 33rpx;
  }
  .msg_cloose {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #9e9e9e;
    line-height: 33rpx;
  }
  .itxst {
    display: flex;
    flex-direction: column;
    .line {
      border-bottom: 2rpx solid #86b8ff;
      margin: 28rpx 0rpx;
    }
    .group {
      // border: 1px solid green;
      height: 100%;

      display: flex;
      // .Bzu {
      //   border: 1px solid red;
      // }

      .itemmove {
        box-sizing: border-box;
        // width: 150rpx;
        height: 66rpx;
        line-height: 30rpx;
        border-radius: 78rpx 78rpx 78rpx 78rpx;
        opacity: 1;
        border: 2rpx solid #306eff;
        padding: 16rpx 20rpx;
        margin: 28rpx 0;
        text-align: center;
        // line-height: 66rpx
        margin-right: 8rpx;
        margin-left: 8rpx;

        .move {
          height: 34rpx;
          width: 100%;
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #306eff;
          line-height: 28rpx;
        }
      }
    }
  }
}
.mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  z-index: -1;
}
</style>
